<template>
  <div class="tab-bar-wrap bg-white">
    <div class="tab-bar">
      <div v-for="item in tabBars" class="options text-muted">
        <i class="iconfont f24" :class="item.icon"></i>
        <div class="f12">{{item.name}}</div>
      </div>
    </div>
    <div class="tab-center">
      <div class="underground"></div>
      <div class="cover"></div>
      <div class="icon"><i class="iconfont icon-saoma text-white"></i></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tab-bar',
    data () {
      return {
        tabBars: [
          {
            icon: 'icon-shouye',
            name: '首页'
          },
          {
            icon: 'icon-feiji',
            name: '星志愿'
          },
          {
            icon: null,
            name: null
          },
          {
            icon: 'icon-tianxie',
            name: '智能提分'
          },
          {
            icon: 'icon-wode',
            name: '我的'
          }
        ]
      }
    }
  }
</script>

<style lang="less">
  @import '../../assets/less/_mixins-wln.less';
  .tab-bar-wrap{
    position: fixed;
    bottom:0;
    width: 100%;
    .tab-bar {
      height: 56px;
      display: flex;
      justify-content: space-around;
      border-top:1px solid #d9dde1;
      background-color:#fff;
      .options{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .iconfont{

        }
      }
    }
    .tab-center{
      width: 60px;
      position: absolute;
      left:50%;
      margin-left: -30px;
      top: -8px;
      .underground{
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        border:1px solid #d9dde1;
        background-color: #fff;
        z-index: -1;
      }
      .cover{
        position: absolute;
        width: 58px;
        height: 58px;
        top:1px;
        left:1px;
        border-radius: 30px;
        background-color: #fff;
      }
      .icon{
        width: 46px;
        height: 46px;
        border-radius: 23px;
        background-color: @primary;
        position: absolute;
        top:9px;
        left:7px;
        box-shadow: 0 0 5px @primary;
        .icon-saoma{
          font-size: 23px;
          position: absolute;
          left:12px;
          top: 12px;
        }
      }
    }
  }

</style>
